<template>
    <div class="page-layout">
        <header>
            <slot name="header" />
        </header>
        <main :class="[hasFooterSlot || 'no-footer']">
            <slot></slot>
        </main>
        <footer v-if="hasFooterSlot">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
export default {
    computed: {
        hasFooterSlot() {
            return !!this.$slots.footer
        }
    }
}
</script>

<style lang="less">
.page-layout {
    display: block;
    position: relative;
    height: 100%;
    background: #fff;
    > header,
    > main,
    > footer {
        height: 48px;
        padding: 8px 12px;
    }
    > header,
    > footer {
        text-align: right;
    }
    > header {
        border-bottom: 1px solid #ddd;
        .el-input {
            width: 220px;
            margin-right: 10px;
        }
    }
    > footer {
        border-top: 1px solid #ddd;
    }
    > main {
        height: calc(100% - 48px - 48px);
        overflow-x: hidden;
        &.no-footer {
            height: calc(100% - 48px);
        }
        .el-date-editor.el-input {
            width: 100%;
        }
    }
}
</style>